<template ref="transEvent">
    <el-row :gutter="10" class="hdpi">
        <!-- <el-col :lg="5" :md="5" class="hidden-md-and-down">
            <el-collapse :value="activeName" style="border:0;">
                <el-collapse-item  v-for="(item,index) in groupslist" :title="item.name" :name="item.id" class="grid-back collapse-custom" >
                    <div v-if="item.childrens==null ||item.childrens.length==0" class="group-device" v-for="devices in item.list">{{devices.name}} <span style="font-size:16px;" class="fr">{{devices.stateText}}</span></div>
                    
                    <el-collapse v-if="item.childrens&&item.childrens.length>0" :value="activeName2" style="border:0;">
                        <el-collapse-item  v-for="childrens in item.childrens" :title="childrens.name" :name="childrens.id" class="grid-back collapse-custom" >
                            <div class="group-device" v-for="devices in childrens.list">{{devices.name}} <span style="font-size:16px;" class="fr">{{devices.stateText}}</span></div>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
            </el-collapse>
        </el-col> -->
        <el-col :lg="24" :md="24" style="padding: 20px;">
            <div style="color:#fff;font-size:19px;margin-top:20px">数据概览</div> 
            <!-- <div class="grid-back temperature" style="margin: 20px 0;display: flex;justify-content: space-between;align-items: center;">
                 <el-date-picker
                    v-model="datelist"
                    type="date"
                    placeholder="选择日期"
                    @change="selectdate1"
                    value-format="yyyy-MM-dd"
                    v-if="!showmonth">
                </el-date-picker>
                    <el-date-picker
                    v-model="datelist"
                    type="month"
                    placeholder="选择月份"
                    @change="selectdate2"
                    v-if="showmonth">
                </el-date-picker>
                <el-select v-model="deviceId" style="position: absolute;left: 18vw;">
                    <el-option v-for="item in devicelist" :label="item.name" :value="item.deviceId"></el-option>
                </el-select>
                <div style="font-size:18px;cursor: pointer;" @click="changedate()">
                    <span>{{datetext}}</span>
                    <i class="el-icon-sort" style="transform: rotateZ(90deg);"></i>
                </div>
            </div> -->
            <div style="display: flex;justify-content: space-between;">
                 <el-col class="grid-back grid-detailed" :span="7">
                     <div>
                        <div>测温总人数</div>
                        <div><span style="font-size:40px;">{{allincome}}</span>人</div>
                        <!-- <div>充电费:{{chargingfee}}元</div>
                        <div>服务费:{{servicefee}}元</div> -->
                     </div>
                 </el-col>
                 <el-col class="grid-back grid-detailed" :span="7">
                     <div>
                        <div>正常体温人数</div>
                        <div><span style="font-size:40px;">{{allcharge}}</span>人</div>
                     </div>
                 </el-col>
                 <el-col class="grid-back grid-detailed" :span="7">
                     <div>
                        <div>体温高于37.2℃人数</div>
                        <div><span style="font-size:40px;">{{allOrder}}</span></div>
                     </div>
                 </el-col>
            </div>
            <div style="color:#fff;font-size:19px;margin-top:20px">{{incometext}}</div> 
            <!-- <div style="color:#fff;font-size:19px;margin-top:20px">收入统计图</div>  -->
            <div :span="24" id="chartColumn1" style="width:100%;height:400px;"></div>
        </el-col>
    </el-row>
</template>

<script>
import echarts from "echarts";
import {
    device_query,
    device_company_group_query,
    device_group_query,
    device_data_analyse,
    device_data_analyse_dataCount,
    device_data_temperature_log,
    device_data_temperature_log_query
} from "../../api/api"
export default {
    data(){
        return{
            devicelist:[],
            activeName: [],
            activeName2:[],
            listLoading: false,
            groupslist:[],//分组列表
            datelist:"",//时间日期
            startTime:'',//开始时间（订单总量接口用到）
            endTime:'',//结束时间（订单总量接口用到）
            showmonth: false,//切换日和月
            datetext:'日',//文本显示"月"或者"日"
            incometext:'最近三十天测温人数',//文本显示
            allincome:'',//测温总人数
            allincomeDaylist:[],//最近30天收入日期数组（充电）
            allserveDaylist:[],//最近30天收入日期数组（服务）
            allincomeSumslist:[],//最近30天充电费收入数组
            allserveSumslist:[],//最近30天服务费收入数组
            chargingfee:'',//充电费
            servicefee:'',//服务费
            allcharge:'',//正常体温人数
            allOrder:'',//体温高于37.2℃人数
            chartColumn1:null,//统计图元素的ID
            devicelist:'',
            deviceId:''
        }
    },
    methods:{
        //获取设备列表
        getdevicelist(){
            let para = {
                pageNo: 1,
                pageSize: 10,
                deviceTemplateId: 385
            }
            device_query(para).then(res =>{
                console.log(res)
                if(res.code == 0){
                    this.devicelist = res.data.list
                    this.deviceId = res.data.list[0].deviceId
                    this.getDate()
                }
            })
        },
        getgroup(){//获取分组列表
            this.listLoading = true;
            let para = {
                pageNo: 1,
                pageSize: 1000,  
            };
            device_group_query(para).then(res => { 
            var newObj
            let oldgroupslist=res.data
            let newgroupslist=[]
            this.begCode(res.code);
            // this.getrecursion(res.data);
            // this.groupslist = res.data
            this.listLoading = false;     
            for(let i in oldgroupslist){//过滤掉不含充电站的分组
                if(oldgroupslist[i].name.indexOf('充电站') > -1){
                    newgroupslist.push(oldgroupslist[i])
                }
            }
            // console.log(this.oldgroupslist)
            this.groupslist = newgroupslist
            for(let i in this.groupslist){
                // this.activeName.push(this.groupslist[i].id)//默认展开所有列表
                // console.log(this.groupslist[i].childrens.length)
                if(this.groupslist[i].childrens!=null && this.groupslist[i].childrens.length > 0){
                    this.groupslist[i].childrens.forEach(datas => {
                        // console.log(datas)
                        let para1 = {
                            deviceGroupId: datas.id,
                            mini: 5,
                            pageNo: 1,
                            pageSize: 1000,
                        }
                        device_company_group_query(para1).then(res => {
                            var newObj1 = []
                            for(let j in res.data.list){
                                if(res.data.list[j].deviceTypeId != "214"){//根据设备id(deviceTypeId)过滤掉含有摄像头的设备
                                    newObj1.push(res.data.list[j])
                                    this.$set(datas,'list',newObj1)
                                }
                            }
                        })
                    });
                }
                let para = {
                    deviceGroupId: this.groupslist[i].id,
                    mini: 5,
                    pageNo: 1,
                    pageSize: 1000,
                    // deviceTypeId: 214,//过滤掉不含有摄像头的设备
                }
                device_company_group_query(para).then(res => {
                        // console.log(res)
                        var newObj = []
                        for(let j in res.data.list){
                            if(res.data.list[j].deviceTypeId != "214"){//根据设备id(deviceTypeId)过滤掉含有摄像头的设备
                                newObj.push(res.data.list[j])
                                // console.log(newObj)
                                this.$set(this.groupslist[i],'list',newObj)
                            }
                        }
                        // Object.assign(this.groupslist[i],newObj)
                });
            }
            // console.log(this.groupslist)
            });
        },
        getrecursion(data) {
        for (var i in data) {
          this.groupslist.push(data[i]);
          OUT:
          if (!data[i].childrens) {
            break OUT;
          } else {
            this.getrecursion(data[i].childrens);
          }
        }
        // console.log(this.groupslist)
      },
      selectdate1(e){//选择年月日
        // console.log(e)
        if(e){
         this.startTime = e + ' 00:00:01'
         this.endTime = e + ' 23:59:59'
        }
        let para = {
            registerList:'32942-1-temp',
            // endDate: this.datelist,//结束时间
            createTime: this.datelist,//结束时间
            type: 1,//日:1，周:2，月:3 
            num: 1,//结束时间前num天至结束时间
            range:0,//范围，填0返回总人数，填37返回温度大于37不正常的人数
            deviceId: this.deviceId,
        }
        device_data_temperature_log_query(para).then(res =>{
            console.log(res.data)
            if(res.code == 0){
                this.allincome = res.data.list[0].total
            }
            this.getAllorder(this.datelist,1)
        })
        // device_data_analyse_dataCount(para).then(res =>{
        //     console.log(res.data)
        //     if(res.code == 0){
        //         this.allincome = res.data["32942-1-temp"][0].sums
        //     }
        //     this.getAllorder(this.datelist,1)
        // })
      },
      selectdate2(e){//选择年月
        // console.log(e)
         let date = new Date(e);
         let month = (date.getMonth() + 1).toString().padStart(2,'0');//padStart的用法https://blog.csdn.net/ixygj197875/article/details/79090578
         let year = date.getFullYear();
         let day = new Date(year,month,0);
         let endTime = year + '-' + month + '-' + day.getDate();

        this.startTime = year + '-' + month + '-'+'01' + ' 00:00:01'
        this.endTime = endTime +' 23:59:59'
        let para = {
            registerList:'32942-1-temp',
            endDate: endTime,//结束时间
            type: 1,//日:1，周:2，月:3 
            num: 30,//结束时间前num天至结束时间
            range:0,//范围，填0返回总人数，填37返回温度大于37不正常的人数
            deviceId: this.deviceId,
        }
        device_data_analyse_dataCount(para).then(res =>{
            // console.log(res)
            this.allincome=0
            // //计算月份总量
            for(let i in res.data["32942-1-temp"]){//总测温人数
                this.allincome += res.data["32942-1-temp"][i].sums
            }
            // // this.drawColumnChart1()
            this.getAllorder(endTime,30)
        })
      },
      getmonthMoney(type,num,range){//最近30天测温人数
        // console.log(type)
        // console.log(num)
        // console.log(range)
            let para = {
                registerList:'32942-1-temp',
                endDate: this.datelist,//结束时间
                type: type,//日:1，周:2，月:3 
                num: num,//结束时间前num天至结束时间
                range: range,//范围，填0返回总人数，填37返回温度大于37不正常的人数
                deviceId: this.deviceId,
            }
            device_data_temperature_log(para).then(res =>{
                console.log(res) 
                 if(range == 0){
                    this.allincomeDaylist=[]
                    this.allincomeSumslist=[]
                    for(let i in res.data.result){//30天总测温人数
                        this.allincomeDaylist.push(res.data.result[i].days)
                        this.allincomeSumslist.push(res.data.result[i].sums)
                    }
                 }else if(range == '37.1'){
                    this.allserveSumslist=[]
                     for(let i in res.data.result){//
                        this.allserveSumslist.push(res.data.result[i].sums)
                    }
                 }
                this.drawColumnChart1()
            })

            // device_data_analyse_dataCount(para).then(res =>{
            //     console.log(res) 
            //      if(range == 0){
            //         this.allincomeDaylist=[]
            //         this.allincomeSumslist=[]
            //         for(let i in res.data["32942-1-temp"]){//30天总测温人数
            //             this.allincomeDaylist.push(res.data["32942-1-temp"][i].days)
            //             this.allincomeSumslist.push(res.data["32942-1-temp"][i].sums)
            //         }
            //      }else if(range == '37.1'){
            //         this.allserveSumslist=[]
            //          for(let i in res.data["32942-1-temp"]){//
            //             this.allserveSumslist.push(res.data["32942-1-temp"][i].sums)
            //         }
            //      }
            //     this.drawColumnChart1()
            //     // console.log(this.allincomeDaylist)
            //     // console.log(this.allincomeSumslist)
            // })
      },
      changedate(){//切换日和月
        // console.log(this.showmonth)
        this.showmonth=!this.showmonth
        if(this.showmonth){
            this.datetext = "月"
            // console.log(this.incometext)
            this.incometext = "最近十二个月测温人数"
            // console.log('这里显示月份')
            let date1 = new Date()
            // console.log(date1)
            this.selectdate2(date1)
            this.getmonthMoney(3,12,0)
            this.getmonthMoney(3,12,'37.1')
        }else if(!this.showmonth){
            this.datetext = "日"
            this.incometext = "最近三十天测温人数"
            this.selectdate1(this.datelist)
            this.getmonthMoney(1,30,0)
            this.getmonthMoney(1,30,'37.1')
        }
      },
      drawColumnChart1(){
        let _this = this
         _this.chartColumn1 = echarts.init(document.getElementById("chartColumn1"));
         _this.chartColumn1.setOption({
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['测温总人数', '高于37.2℃人数'],
                textStyle:{
                    color:'#fff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,//坐标轴两边留白策略
                data: _this.allincomeDaylist,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color:'#fff'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color:'#fff'
                    }
                }
            },
            series: [
                {
                    name: '测温总人数',
                    type: 'line',
                    // stack: '总量',
                    data: _this.allincomeSumslist
                },
                {
                    name: '高于37.2℃人数',
                    type: 'line',
                    // stack: '总量',
                    data: _this.allserveSumslist,
                     itemStyle : {  
                        normal : {  
                            color: "#4395ff",//图例的颜色
                            lineStyle:{  
                                color:'#4395ff'//线的颜色
                            }  
                        }  
                    }, 
                },
            ]
        });
        this.chartColumn1.resize()
      },
      getAllorder(endDate,num){
        //endDate结束时间，num天数
        let para = {
            registerList:'32942-1-temp',
            endDate: endDate,//结束时间
            type: 1,//日:1，周:2，月:3 
            num: num,//结束时间前num天至结束时间
            range: '37.1',//范围，填0返回总人数，填37返回温度大于37不正常的人数
            deviceId: this.deviceId,
        }
        device_data_temperature_log(para).then(res =>{
            console.log(res)
            if(res.code == 0){
                if(num == 1){
                    this.allOrder = res.data.result[0].sums
                    this.allcharge =  this.allincome - this.allOrder 
                }else if(num == 30){
                    this.allOrder = 0
                    for(let i in res.data.result){//本月体温高于37度人数
                        this.allOrder += res.data.result[i].sums
                    }
                    this.allcharge =  this.allincome - this.allOrder 
                }
            }
        })
        // device_data_analyse_dataCount(para).then(res =>{
        //     // console.log(res.data)
        //     if(res.code == 0){
        //         if(num == 1){
        //             this.allOrder = res.data["32942-1-temp"][0].sums
        //             this.allcharge =  this.allincome - this.allOrder 
        //         }else if(num == 30){
        //             this.allOrder = 0
        //             for(let i in res.data["32942-1-temp"]){//本月体温高于37度人数
        //                 this.allOrder += res.data["32942-1-temp"][i].sums
        //             }
        //             this.allcharge =  this.allincome - this.allOrder 
        //         }
        //         // console.log(this.allincome)
        //         // console.log(this.allOrder)
        //     }
        // })
      },
      getDate(){
          let date = new Date()
          let year = date.getFullYear();
          let month = (date.getMonth() + 1).toString().padStart(2,'0');
          let hour = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();

          let day = date.getDate()
          this.datelist = year + '-' + month + '-' + day
          this.startTime = year + '-' + month + '-' + day + ' ' + hour + ':' +minute + ':' + second
          this.endTime = year + '-' + month + '-' + day + ' 23:59:59'
        //   console.log(this.startTime)
        //   console.log(this.endTime)
          this.selectdate1(this.datelist)
          this.getmonthMoney(1,30,0)
          this.getmonthMoney(1,30,'37.1')
          
        //   console.log(year + '-' + month + '-' + day)
      },
    //   handleselect(e){
    //       console.log(e)
    //   }
    },
    mounted(){
        this.getdevicelist()
        // this.getDate()
        this.getgroup()
    }
}
</script>

<style>
    .hdpi{
        height: 100%;
    }
    .hidden-md-and-down{
        margin: 20px;
        max-height: 85vh;
        overflow: auto;
    }
    .hidden-md-and-down::-webkit-scrollbar{
        display:none
    }
    .grid-back {
        position: relative;
        background-size: 100%;
        padding: 2% 10px ;
        /* min-height: 300px; */
        background-position: top, bottom;
        background-image: url(../../assets/01.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color:#fff;
  }
  .grid-back-title{
      text-align: center;
      font-size: 20px;
      padding: 30px 0;
  }
  .el-date-editor>input{
      background: #042B5B;
      color: #fff;
      opacity: 0.5;
  }
  .grid-detailed{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .collapse-custom .el-collapse-item__header{
      background: #0c3465;
      border-bottom: 1px;
      font-size: 20px;
      /* text-align: center; */
      opacity: .8;
  }
  .collapse-custom .el-collapse-item__content{
      padding: 0;
      border: 0;
      background: #0c3465;
      opacity: .8;
  }
  .collapse-custom .el-collapse-item__wrap{
      border: 0;
      background: #0c3465;
      opacity: .8;
  }
  .group-device{
      color: #fff;
      /* text-align: center; */
      font-size: 18px;
      cursor: pointer;
      margin: 10px 0;
      padding: 10px 20px;
  }
  .group-device:hover{
      background: #2b5486;
  }
  .temperature .el-input__inner{
      background: #0c3465;
      color: #fff;
      opacity: 0.5;
  }
</style>